<template>
	<div class="diy_edit nav_edits" id="nav_edit">
	  <el-form
		:model="form"
		ref="ruleFormRef"
		:rules="rules"
		label-width="auto"
		class="edit_nav_form"
		size="large"
	  >
	  <el-row class="row_e">
				<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="导航名" prop="name">
					<el-input v-model="form.name" placeholder="请输入导航名"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="位置" prop="location">
					<el-select v-model="form.location">
						<el-option v-for="obj in list_location" :key="obj.value" :label="obj.text" :value="obj.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="跳转方式" prop="target">
					<el-select v-model="form.target">
						<el-option v-for="obj in list_target" :key="obj.value" :label="obj.text" :value="obj.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="链接地址" prop="url">
					<el-input v-model="form.url" placeholder="请输入链接地址"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="父级" prop="father_id">
					<el-select v-model="form.father_id">
						<el-option :key="-1" label="无" :value="0"></el-option>
						<el-option v-for="obj in list_nav" :key="obj.nav_id" :label="obj.name" :value="obj.nav_id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="footer">
		  <el-button type="primary" @click="Onsubmit" size="large"
			>提交</el-button
		  >
		  <el-button @click="cancel()" size="large">取消</el-button>
		</div>
	  </el-form>
	</div>
  </template>
  
  <script setup>
  import { ElMessage } from "element-plus";
  import { ref, onMounted } from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import { $getUrlParams,} from "@/utils/utils.js";
  let router = useRouter();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let nav_id = $getUrlParams().nav_id;
  let url_add = ref("/api/nav/add");
  let url_set = ref("/api/nav/set");
  let url_get_obj = ref("/api/nav/get_obj");
  let title = ref("nav");
  let field = ref("nav_id");
  let list_nav = ref([]);
  
  let form = ref({
	nav_id: 0,
	name: '',
	location: '',
	target: "",
	url: "",
	father_id: 0
  });
  // 跳转位置
  let list_location = ref([
		{
			text: "顶部",
			value: "top"
		},
		{
			text: "侧边",
			value: "side"
		},
		{
			text: "底部",
			value: "foot"
		}
	]);
	// 跳转方式
  let list_target = ref([
		{
			text: '新页面',
			value: "_blank"
		},
		{
			text: '本页面',
			value: "_self"
		},
		{
			text: '父窗口',
			value: "_parent"
		},
		{
			text: '全窗口',
			value: "_top"
		}
	]);
  let ruleFormRef = ref(null);
  let rules = ref({
	name: [
	  {
		required: true,
		message: "导航名不能为空",
		trigger: "blur",
	  },
	],
  });
  
  // 点击取消
  let cancel = () => {
	router.go(-1);
  };
  // 点击提交
  let Onsubmit = async () => {
	let valid = await ruleFormRef.value.validate();
	if (valid) {
	  if (nav_id) {
		// 编辑
		delete form.value.update_time;
		$post(url_set.value + "?nav_id=" + nav_id, form.value).then(
		  (res) => {
			if (res.result) {
			  ruleFormRef.value.resetFields();
			  router.push("/home/nav/table");
			  ElMessage.success("提交成功！");
			} else if (res.error) {
			  ElMessage.error(res.error.message);
			}
		  }
		);
	  } else {
		// 新增
		$post(url_add.value, form.value).then((res) => {
		  if (res.result) {
			ruleFormRef.value.resetFields();
			router.push("/home/nav/table");
			ElMessage.success("提交成功！");
		  } else if (res.error) {
			ElMessage.error(res.error.message);
		  }
		});
	  }
	} else {
	  ElMessage.error(msg);
	}
  };
  
	// 获取导航组
	let get_list_nav = async () => {
		var list = await $get('/api/nav/get_list');
		list_nav.value = list.result.obj;
	};
	// 获取详情
	let get_nav_obj = async () => {
		var list = await $get(url_get_obj.value + "?nav_id=" + nav_id);
		form.value = list.result.obj;
	};
	onMounted(() => {
		get_list_nav();
		if(nav_id){
			get_nav_obj();
		}
	});
</script>
  
  <style scoped lang="less">
  .diy_edit {
	width: 100%;
	.edit_nav_form {
	  max-width: 60%;
	  margin: 90px auto;
	  .fn {
		width: 100%;
	  }
	}
	img {
	  width: 100px;
	  height: 100px;
	}
	.edit_list_nav_sell {
	  width: 80%;
	  margin: 90px auto;
	}
	.footer {
	  text-align: center;
	}
  }
  </style>
  